<!doctype html>
{% load static %}
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{% static 'css/info.css'%}">

</head>

<body>
<div id="drops" style="position:absolute; left:0; top:0 ;height:100%; width:100%    ">
    <div class="form-main">
        <div class="logo"></div>
        <div class="form-item">
            <a style="font-size: 28px;color: red">
                {{ title }}
            </a>
        </div>
        <br>
        <div class="form-item">
            <a>
                {{info}}
            </a>
        </div>
        <br><br>
        <div class="form-item">
            {%if '修改成功' == title%}
            <script>
                function toIndex() {
                    location.href = "/logout/";
                }
            </script>
            <button id="submit" onClick="toIndex();">返回</button>
            {%else%}
            <button id="submit" onClick="javascript :history.back(-1);">返回</button>
            {%endif%}
        </div>
        {%if '修改成功' == title%}
        <script>
            onload = function () {
                setInterval(go, 1000)
            };
            var x = 4;

            function go() {
                if (x <= 0) {
                    location.href = "/logout/";
                }
                x--;
            }
        </script>
        {%else%}
        <script>
            onload = function () {
                setInterval(go, 1000)
            };
            var x = 4;

            function go() {
                if (x <= 0) {
                    history.back(-1);
                }
                x--;
            }
        </script>
        {%endif%}
        {%if '认证过期' == title%}
        <script>
            location.href = "/logout/";
        </script>
        {%endif%}
    </div>
</div>
</body>
<script type="text/javascript">
    console.clear();

    const drops = 75;
    const dropsContainer = document.querySelector("#drops");

    dropsContainer.onmousemove = (e) => {
        mousePositionX = Math.floor(
            map(e.clientX, 0, dropsContainer.offsetWidth, 10, -10)
        );
        if (
            dropsContainer.style.getPropertyValue("--mouse-value") !== mousePositionX
        ) {
            dropsContainer.style.setProperty("--mouse-value", mousePositionX);
            dropsContainer.style.setProperty(
                "--mouse-position",
                `${mousePositionX}rem`
            );
            dropsContainer.style.setProperty("--rotation", `${mousePositionX}deg`);
        }
    };

    const createDrop = () => {
        const drop = document.createElement("div");
        drop.classList.add("drop");
        const rand = getRandomInt(3, 5);
        const randPosition = getRandomInt(-150, dropsContainer.offsetWidth + 150);
        const dropTime = getRandomInt(2, 4);
        const dropHeight = getRandomInt(3, 7);
        drop.style.setProperty("--left", `${randPosition}px`);
        drop.style.setProperty("--time", `.${rand}s`);
        drop.style.setProperty("--opacity", `.${rand}`);
        drop.style.setProperty("--drop-time", `.${dropTime}s`);
        drop.style.setProperty("--drop-height", `${dropHeight}rem`);
        drop.onanimationend = (animation) => {
            if (animation.animationName === "drop") {
                drop.classList.add("splash");
                drop.classList.remove("drop");
                createDrop();
            } else {
                drop.remove();
            }
        };
        dropsContainer.append(drop);
    };

    Array(drops)
        .fill(1)
        .forEach(() => {
            createDrop();
        });

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

    function map(value, istart, istop, ostart, ostop) {
        return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
    }

</script>
</html>